<template>
	<div class="app-container foSi14">
		<div class="dis disJuB mar-bott20">
			<div class="dis">
				<div>
					<div class="foSi12 hei20" style="color: #838383;">模板名称</div>
					<el-input v-model="name"  size="small" style="width: 140px;" placeholder="模板名称" />
				</div>
				<div style="margin-left: 10px">
					<el-button type="primary" size="small" class="mar-top20 bac6b7"
						@click.stop="suosouClick()">搜索</el-button>
				</div>
			</div>
			<div>
				<el-button type="primary" class="mar-top20 bac6b7" size="small" @click.stop="add">新增模板</el-button>
			</div>
		</div>
		<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
			<div slot="empty" class="m-empty-box">
				<div class="mar" style="width: 168px;height: 180px;">
					<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
				</div>
				<div class="title">暂无数据</div>
			</div>
			<el-table-column prop="templateId" label="模板ID" />
			<el-table-column prop="templateName" label="模板名称" />
			<el-table-column prop="creator" label="企业发起人" />
			<el-table-column :label="$t('table.actions')" align="center" width="300"
				class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<div class="wid100 dis disJuC">
						<div class="dis disAl cuPo"
							@click.stop="initiate(scope.row)">
							<i class="el-icon-upload2" style="color: #6b7cdd; font-size: 20px" />发起合同
						</div>
						<div class="dis disAl cuPo mar-left10"
							@click.stop="edit(scope.row.templateId)">
							<i class="el-icon-edit-outline" style="color: #6b7cdd; font-size: 20px" />修改模板
						</div>
						<div class="dis disAl cuPo mar-left10"
							@click.stop="details(scope.row.templateId)">
							<i class="el-icon-document" style="color: #6b7cdd; font-size: 20px" />预览模板
						</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
			@pagination="getList" />
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		uploadimg,
		sendCode
	} from '@/api/utils'
	import {
		getTemplateList,
		contract_num
	} from '@/api/contract'
	export default {
		name: 'contractTemplate',
		components: {
			Pagination
		},
		data() {
			return {
				total: 0,
				listQuery: {
					page: 1,
					limit: 10
				},
				listLoading: false,
				list: null,
				name: '',
				my_contract_num:0
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '合同模板',
				url: '/contract/contractTemplate',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
			this.getnum()
		},
		methods: {
			initiate(item){
				if(this.my_contract_num <= 0){
					return this.$message({
								message: '您的合同份数不足',
								type: 'warning'
							});
				}
				localStorage.setItem('contract_detail', JSON.stringify(item))
				this.$router.push({
					path: '/contract/contractInitiateTwo'
				})
			},
			suosouClick(){
				this.listQuery.page = 1
				this.getList()
			},
			add() {
				this.$router.push({
					path: '/contract/contractTemplateUpload?type=CREATE_TEMPLATE'
				})
			},
			edit(id) {
				console.log(id)
				this.$router.push({
					path: '/contract/contractTemplateUpload?type=MODIFY_TEMPLATE&id='+id
				})
			},
			details(id) {
				console.log(id)
				this.$router.push({
					path: '/contract/contractTemplateUpload?type=PREVIEW_TEMPLATE&id='+id
				})
			},
			// 获取合同剩余份数
			getnum(){
				this.listLoading = true
				contract_num({}).then(response => {
					const {
						data
					} = response
					this.my_contract_num = data
					this.listLoading = false
				}).catch(error => {
					this.listLoading = false
					console.log(error)
				})
			},
			getList(){
				this.listLoading = true
				getTemplateList({
          'page': this.listQuery.page,
          'limit': this.listQuery.limit,
					'templateName': this.name
				}).then(response => {
					const {
						data
					} = response
					this.total = data.limit
					this.list = data.templateInfo
					this.listLoading = false
				}).catch(error => {
					this.listLoading = false
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
	.app-container {
		padding: 20px;
	}
</style>
